<template>
  <button @click="count++">{{ count }}</button>
  <button @click="sayHi">{{ person.name }} - {{ person.age }}</button>

  <input type="text" v-focus />

  <HelloWorld ref="hwRef" name="张三" />

  <button @click="get">获取 hwRef</button>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { focus as vFocus } from './MyDirective'
// 顶层数据会自动暴露给模板使用，无需return
import { ref, reactive } from 'vue'

const count = ref(0)

const person = reactive({
  name: '张三',
  age: 18
})

const sayHi = () => {
  alert('111')
}

// const vFocus = {
//   mounted(el, binding) {
//     el.focus()
//   }
// }

const hwRef = ref(null)
const get = () => {
  console.log(hwRef.value)
}
</script>
